<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SPIRIT8</title>


    <!-- 引入bootstrap插件 -->
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css" />

    <!-- 引入动画库 -->
    <link rel="stylesheet" href="./assets/css/animate.min.css" />

    <!-- 引入重写文件 重置html元素的自带的样式 -->
    <link rel="stylesheet" type="text/less" href="./assets/css/reset.less" />

    <!-- 引入自己的样式文件 -->
    <link rel="stylesheet" type="text/less" href="./assets/css/index.less" />
</head>


<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-default" id="home">
        <div class="container">
            <!-- 左侧的元素 -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand wow slideInLeft" href="#home">SPIRIT8</a>
          </div>
          
           
           <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <!-- 搜索栏 -->    
                <!-- 
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form> 
                -->


            <!-- 右侧元素（导航） -->
            <ul class="nav navbar-nav navbar-right">                      
              <li><a class="wow slideInRight"  data-wow-delay="50ms" href="#banner">HOME</a></li>
              <li><a class="wow slideInRight" data-wow-delay="100ms" href="#about">ABOUT</a></li>
              <li><a class="wow slideInRight" data-wow-delay="150ms" href="#team">TEAM</a></li>
              <li><a class="wow slideInRight" data-wow-delay="200ms" href="#service">service</a></li>
              <li><a class="wow slideInRight" data-wow-delay="200ms" href="#client">client</a></li>
              <li><a class="wow slideInRight" data-wow-delay="200ms" href="#work">work</a></li>
              <li><a class="wow slideInRight" data-wow-delay="250ms" href="#testimonials">testimonials</a></li>
              <li><a class="wow slideInRight" data-wow-delay="300ms" href="#contact">CONTACT</a></li>
              
            </ul>
          </div>
        </div>
    </nav>

    <!-- banner -->
     <div class="banner" id="banner">
        <div class="title wow bounceIn" data-wow-delay="500ms">
            WELCOME on <span>SPIRIT8</span>
        </div>
        <div class="subtitle wow fadeInUp" data-wow-delay="600ms">
            We are a digital agency with <span>years of experience</span> and with <span>extraordinary people</span>.
        </div>
        <div class="more wow fadeInDown" data-wow-delay="600ms">
            <a href="#about">↓</a>
        </div>

     </div>
    
     <!-- about -->
     <div class="about" id="about">
        <div class="container">
            <div class="left wow slideInLeft">
                <img src="./assets/images/about-background1.jpg" alt="">
            </div>

            <div class="right ">
                <div class="subject ">
                    <div class="small wow slideInRight">About us</div>
                    <div class="big wow slideInRight">
                        <span>Some</span> words <span>about us</span>
                    </div>

                    <div class="desc wow slideInRight" >We love building and rebuilding brands through our  specific skills. Using colour, fonts, and illustration, we brand companies in a way they will never forget.</div>
                    <!-- 列表 -->
                    <ul class="list ">
                        <li class="wow fadeIn" data-wow-delay="400ms">
                            <span class="glyphicon glyphicon-record " aria-hidden="true"></span>
                            <span>Mission - </span>
                            We deliver uniqueness and quality
                        </li>
                        <li class="wow fadeIn" data-wow-delay="500ms">
                            <span class="glyphicon glyphicon-record " aria-hidden="true"></span>
                            <span>Skills - </span>
                            Delivering fast and excellent results

                        </li>
                        <li class="wow fadeIn" data-wow-delay="600ms">
                            <span class="glyphicon glyphicon-record " aria-hidden="true"></span>
                            <span>Clients - </span>
                            Satisfied clients thanks to our experience
                            
                        </li>
                    </ul>
                    <div class="more wow fadeInDown" data-wow-delay="700ms">
                        <span class="glyphicon glyphicon glyphicon-envelope"></span>
                        <li><a href="#work"><span >browse our work</span></a></li>
                    </div>
                </div>
            </div>
        </div>


     </div>

    <!-- Team -->
     <div class="team" id="team">
        <div class="container">

            <div class="title wow fadeInDown">
                meet <span>our team</span>
            </div>

            <div class="list">
                <!-- 一个 -->
                <div class="item wow fadeInDown" data-wow-delay="100ms">
                    <div class="cover">
                        <img src="./assets/images/team1.png" alt="">
                    </div>
                    <div class="box">
                        <p>Jason Statham</p>
                        <p>StathamKnife</p>
                        <p>Do not seek to change what has come before. Seek to create that which has not.</p>
                    </div>
                </div>  
                <div class="item wow fadeInDown" data-wow-delay="200ms">
                    <div class="cover">
                        <img src="./assets/images/team2.jpg" alt="">
                    </div>
                    <div class="box">
                        <p>Jason Statham</p>
                        <p>StathamKnife</p>
                        <p>Do not seek to change what has come before. Seek to create that which has not.</p>
                    </div>
                </div>  
                <div class="item wow fadeInDown" data-wow-delay="300ms">
                    <div class="cover">
                        <img src="./assets/images/team3.png" alt="">
                    </div>
                    <div class="box">
                        <p>Jason Statham</p>
                        <p>StathamKnife</p>
                        <p>Do not seek to change what has come before. Seek to create that which has not.</p>
                    </div>
                </div>  
                <div class="item wow fadeInDown" data-wow-delay="400ms">
                    <div class="cover">
                        <img src="./assets/images/team4.png" alt="">
                    </div>
                    <div class="box">
                        <p>Jason Statham</p>
                        <p>StathamKnife</p>
                        <p>Do not seek to change what has come before. Seek to create that which has not.</p>
                    </div>
                </div>  
            </div>
            <div class="more">
                <span class="glyphicon glyphicon-minus"></span>
                <span class="glyphicon glyphicon-minus"></span>
                <span class="glyphicon glyphicon-minus"></span>
            </div>
        </div>
     </div>

    <!-- service -->
     <div class="service" id="service">
        <div class="container">

            <div class="title wow fadeInDown">
                take a look at <span>our services</span>
            </div>
            
            <div class="desc wow fadeIn" data-wow-delay="50ms">
                Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
            </div>

            <div class="list">
                <!-- 一个 -->
                <div class="item wow fadeInDown" data-wow-delay="100ms">
                    <div class="cover">
                        <img src="./assets/images/01.png" alt="">
                    </div>
                    <div class="box">
                        <p>Web design</p>
                        <p>he first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
                    </div>
                </div>  
                <!-- two -->
                <div class="item wow fadeInDown" data-wow-delay="200ms">
                    <div class="cover">
                        <img src="./assets/images/02.png" alt="">
                    </div>
                    <div class="box">
                        <p>Web design</p>
                        <p>he first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
                    </div>
                </div>  
                <!-- three -->
                <div class="item wow fadeInDown" data-wow-delay="300ms">
                    <div class="cover">
                        <img src="./assets/images/03.png" alt="">
                    </div>
                    <div class="box">
                        <p>Web design</p>
                        <p>he first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
                    </div>
                </div>  
                <!-- four -->
                <div class="item wow fadeInDown" data-wow-delay="400ms">
                    <div class="cover">
                        <img src="./assets/images/04.png" alt="">
                    </div>
                    <div class="box">
                        <p>Web design</p>
                        <p>he first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
                    </div>
                </div>  
            </div>

            <!-- <div class="more">
                <span class="glyphicon glyphicon-minus"></span>
                <span class="glyphicon glyphicon-minus"></span>
                <span class="glyphicon glyphicon-minus"></span>
            </div> -->
        </div>
     </div>


     <!-- client -->
     <div class="client" id="client">
        <div class="container">

            <div class="title wow fadeInDown">
                SOME OF <span>OUR CLIENTS</span>
            </div>

            <div class="list">
                <!-- 一个 -->
                <div class="item wow fadeInDown" data-wow-delay="100ms">
                    <div class="cover">
                        <img src="./assets/images/client1.png" alt="">
                    </div>
                </div>  
                <!-- two -->
                <div class="item wow fadeInDown" data-wow-delay="200ms">
                    <div class="cover">
                        <img src="./assets/images/client2.png" alt="">
                    </div>
                </div>  
                <!-- three -->
                <div class="item wow fadeInDown" data-wow-delay="300ms">
                    <div class="cover">
                        <img src="./assets/images/client3.png" alt="">
                    </div>
                </div>  
                <!-- four -->
                <div class="item wow fadeInDown" data-wow-delay="400ms">
                    <div class="cover">
                        <img src="./assets/images/client4.png" alt="">
                    </div>
                </div>  
                <!-- five -->
                <div class="item wow fadeInDown" data-wow-delay="500ms">
                    <div class="cover">
                        <img src="./assets/images/client.png" alt="">
                    </div>
                </div>  

            </div>
            <div class="more">
                <span class="glyphicon glyphicon-minus"></span>
                <span class="glyphicon glyphicon-minus"></span>
                <span class="glyphicon glyphicon-minus"></span>
            </div>
        </div>
     </div>


     <!-- work -->
     <div class="work" id="work">
        <div class="container">

            <div class="title wow fadeInDown">
                take a look at <span>our work</span>
            </div>
            
            <div class="desc wow fadeIn" data-wow-delay="100ms">
                <i>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</i>
            </div>

            <div class="line">
                <div class="left wow slideInLeft">Filter by type</div>

                <div class="right wow slideInRight">
                    <a  href="javascript:void(0)"></a><span>All</span></a>
                    &nbsp;&nbsp;|&nbsp;&nbsp;  
                    <a  href="javascript:void(0)">Web disign</a>
                    &nbsp;&nbsp;|&nbsp;&nbsp;  
                    <a  href="javascript:void(0)">Mobile design </a>
                    &nbsp;&nbsp;|&nbsp;&nbsp;   
                    <a  href="javascript:void(0)">Photograpy</a>
                </div>
            </div>

            <div class="list">
                <!-- 一个 -->
                <div class="item wow fadeInDown" data-wow-delay="100ms">
                    <div class="cover">
                        <img src="./assets/images/work1.png" alt="">
                    </div>
                    <div class="cover">
                        <img src="./assets/images/work2.png" alt="">
                    </div>
                    <div class="cover">
                        <img src="./assets/images/work3.png" alt="">
                    </div>
                    <div class="cover">
                        <img src="./assets/images/work4.png" alt="">
                    </div>
                </div>  
                <!-- two -->
                <div class="item wow fadeInDown" data-wow-delay="100ms">
                    <div class="cover">
                        <img src="./assets/images/work5.png" alt="">
                    </div>
                    <div class="cover">
                        <img src="./assets/images/work6.png" alt="">
                    </div>
                    <div class="cover">
                        <img src="./assets/images/work7.png" alt="">
                    </div>
                    <div class="cover">
                        <img src="./assets/images/work8.png" alt="">
                    </div>
                </div> 
                <!-- three -->
                <div class="item wow fadeInDown" data-wow-delay="100ms">
                    <div class="cover">
                        <img src="./assets/images/work9.png" alt="">
                    </div>
                    <div class="cover">
                        <img src="./assets/images/work10.png" alt="">
                    </div>
                    <div class="cover">
                        <img src="./assets/images/work11.png" alt="">
                    </div>
                    <div class="cover">
                        <img src="./assets/images/work12.png" alt="">
                    </div>
                </div> 
            </div>

            <!-- <div class="more">
                <span class="glyphicon glyphicon-minus"></span>
                <span class="glyphicon glyphicon-minus"></span>
                <span class="glyphicon glyphicon-minus"></span>
            </div> -->
        </div>
     </div>

     <!-- testimonials -->
     <div class="testimonials" id="testimonials">
        <div class="container">

            <div class="title wow fadeInDown">
                <span>OUR CLIENTS'</span> testimonials
            </div>

            <div class="desc wow fadeInDown" data-wow-delay="100ms">
                his book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
                <p>Dean Martin, CEO Acme Inc.</p>
            </div>

            
            <div class="more">
                <span class="glyphicon glyphicon-minus"></span>
                <span class="glyphicon glyphicon-minus"></span>
                <span class="glyphicon glyphicon-minus"></span>
            </div>
        </div>
     </div>

    <!-- contact -->
    <div class="contact" id="contact">
       <div class="container">
            <div class="bigbox">
                <div class="title wow fadeInUp" data-wow-delay="100ms">
                    feel free to<span> contact us</span>
                </div>
                <!-- 段落 -->
                <p class="desc wow fadeInUp" data-wow-delay="200ms">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of
                    Good and Evil)
                    by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the
                    Renaissance.</p>
                <!-- 表单 -->
                <div class="register">
                    <form name="register" method="post">
                        <div class="top wow fadeInUp" data-wow-delay="300ms">
                            <div class="item">
                                <h5>Name<sup>*</sup></h5>
                                <div class="input">
                                    <input type="text" name="username" placeholder="请输入用户名称" required />
                                </div>
                            </div>
                            <div class="item">
                                <h5>Email Address<sup>*</sup></h5>
                                <input type="email" name="email" placeholder="请输入邮箱" required>
                            </div>
                        </div>
                        <div class="bottom wow fadeInUp" data-wow-delay="400ms">
                                <h5>Message<sup>*</sup></h5>
                                <textarea name="message" placeholder="请输入内容" required></textarea>
                        </div>
                        <div class="send wow fadeInUp" data-wow-delay="500ms">
                            <button  type="submit" class="wow fadeInUp" data-wow-delay="500ms">SEND</button>
                        </div>
                    </form>
                </div>
            </div>
       </div>
    </div>
    <!-- contact -->

    <!-- 底部 -->
     <footer class="footer" id="footer">
        <div class="container">
            <p class="copyright">All rights RESERVED copyright &copy; 2014 spirits8</p>
            <div class="link">
                <div class="item"><img src="./assets/images/footer1.png" alt=""></div>
                <div class="item"><img src="./assets/images/footer2.png" alt=""></div>
                <div class="item"><img src="./assets/images/footer3.png" alt=""></div>
                <div class="item"><img src="./assets/images/footer4.png" alt=""></div>
                <div class="item"><img src="./assets/images/footer5.png" alt=""></div>

            </div>
        </div>
     </footer>

     <div id="up" class="up">
        <a href="#banner" class="op"><img src="./assets/images/top.svg"></a>
     </div>
</body>
</html>

<!-- 依赖jquery -->
<script src="./assets/js/jquery.min.js"></script>

<!-- 引入bootstrap插件脚本 -->
<script src="./assets/js/bootstrap.min.js"></script>

<!-- 引入less 编译css的一个插件 -->
<script src="./assets/js/less.min.js"></script>

<!-- 引入瀑布流插件的js文件 -->
<script src="./assets/js/wow.min.js"></script>

<script>
    // 实例化瀑布流插件
    new WOW().init()
</script>